<template>
    <div class="header">
        <div class="logo">招财猫移动支付管理平台</div>

        <div class="edit">
            <div style="position:relative;right:30px;cursor:pointer" @click="routerWelcome">欢迎 {{name}}</div>
            <!-- 修改密码图标 -->
            <svg class="icon icon-key" aria-hidden="true" @click="dialogTableVisible = true" style="cursor:pointer">
                <use xlink:href="#icon-key"></use>
            </svg>
            <!-- 全屏按钮 -->
            <FullScreen></FullScreen>
            <!-- 退出按钮图标 -->
            <el-button type="danger" @click="exit()">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tuichu"></use>
                </svg>
            </el-button>
        </div>

        <!-- 弹出框（修改密码） -->
        <el-dialog title="修改密码" :visible.sync="dialogTableVisible">

            <el-row>
                <el-col :span="12" :offset="6">
                    <el-form :label-position="labelPosition" label-width="80px" :model="pwdNumber" size="small " ref="pwdNumber" :rules="checkPwd" status-icon>
                        <el-form-item label="旧密码" prop="oldPwd">
                            <el-input v-model.trim="pwdNumber.oldPwd"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="newPwd">
                            <el-input v-model.trim="pwdNumber.newPwd"></el-input>
                        </el-form-item>
                        <el-form-item label="确认新密码" prop="confirmPwd">
                            <el-input v-model.trim="pwdNumber.confirmPwd"></el-input>
                        </el-form-item>
                        <el-form-item>

                            <!-- 确认按钮 -->
                            <el-row type="flex" class="row-bg" justify="end">
                                <el-col :span="6">
                                    <el-button type="primary" @click="enter('pwdNumber')">确认</el-button>
                                </el-col>
                                <el-col :span="7">
                                    <div class="grid-content bg-purple"></div>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>

        </el-dialog>
    </div>
</template>
<script>
import FullScreen from "./FullScreen";
import * as API from "../http/api";
// 引入md5加密
import md5 from "js-md5";

export default {
	components: {
		FullScreen
    },
    created(){
        this.name = `大师兄`;
    },
	data() {
		// 旧密码验证
		let oldPwdCheck = (rule, value, callback) => {
			let reg = /^(\w){6,16}$/;
			if (!value) {
				return callback(new Error("密码不能为空"));
			}
			setTimeout(() => {
				if (reg.test(value + "")) {
					callback();
				} else {
					callback(new Error("请输入6到16位数字或者英文字母"));
				}
			}, 300);
		};
		// 新密码验证
		let newPwdCheck = (rule, value, callback) => {
			let reg = /^(\w){6,16}$/;
			if (!value) {
				return callback(new Error("密码不能为空"));
			}
			setTimeout(() => {
				if (reg.test(value + "")) {
					if (this.pwdNumber.oldPwd == this.pwdNumber.newPwd) {
						return callback(new Error("新密码不能与旧密码相同"));
					} else {
						callback();
					}
				} else {
					callback(new Error("请输入6到16位数字或者英文字母"));
				}
			}, 300);
		};
		// 再次输入新密码验证
		let confirmPwdCheck = (rule, value, callback) => {
			let reg = /^(\w){6,16}$/;
			if (!value) {
				return callback(new Error("密码不能为空"));
			}
			setTimeout(() => {
				if (reg.test(value + "")) {
					if (this.pwdNumber.newPwd != this.pwdNumber.confirmPwd) {
						return callback(
							new Error("两个新密码不一致，请重新输入")
						);
					} else {
						callback();
					}
				} else {
					callback(new Error("请输入6到16位数字或者英文字母"));
				}
			}, 300);
		};
		return {
			name:`name`,
			dialogTableVisible: false,
			labelPosition: "top",
			pwdNumber: {
				oldPwd: "",
				newPwd: "",
				confirmPwd: ""
			},
			checkPwd: {
				oldPwd: [{ validator: oldPwdCheck, trigger: "blur" }],
				newPwd: [{ validator: newPwdCheck, trigger: "blur" }],
				confirmPwd: [{ validator: confirmPwdCheck, trigger: "blur" }]
            },
            name:"",//用户名称
		};
	},
	methods: {
        // 回到欢迎页面
        routerWelcome(){
            this.$router.push("/Welcome");
        },
		exit() {
			this.$confirm("确定要退出吗?", "提示", {
				type: "warning"
			}).then(() => {
				this.$store.dispatch("loginOut");
			});
		},
		errMsg(msg) {
			this.$message({
				message: msg,
				type: "warning"
			});
		},
		// 修改密码
		enter(pwdNumber) {
			const self = this;
			
		}
	}
};
</script>
<style lang="scss" scoped>
.header {
	box-sizing: border-box;
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	height: 60px;
	font-size: 22px;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	// border-bottom: 2px solid #fff;
	.logo {
		height: 60px;
		line-height: 60px;
		text-align: center;
		padding-left: 30px;
	}

	.edit {
		flex: 1;
		display: flex;
		height: 40px;
		padding-right: 50px;
		font-size: 16px;
		color: #fff;
		justify-content: flex-end;
		align-items: center;
		.icon-key {
			width: 1.5em;
			height: 1.5em;
		}
	}
}
</style>
